<link rel="stylesheet" href="popup_sidebar.css">
<script src="popup_sidebar.js"></script>

<div id="popup_select_component"></div>
<div id="popup_select_location"></div>
<div id="popup_setting_style"></div>
<div id="popup_setting_ajax"></div>
<!-- <div id="popup_setting_component"></div> -->
<div id="popup_select_img_tag"></div>
<div id="popup_insert_script"></div>
<style>
    .btn_card button {
        margin: 10px;
    }
</style>
<link type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        dir: 'https://www.layuicdn.com/layui/',
        version: false,
        debug: false,
        base: ''
    });
</script>
<script>
    // 选择样式
    var data = {
        //弹窗组件生成区域 div id
        id: "popup_select_img_tag",
        //弹窗方向，左边，右边，下边，上边
        direction: 'top',
        height: '300px',
        width: '100vw',
        style: "background-color: #FFF;color:#000;box-shadow:4px 4px 5px #999;left:50%;transform: translateX(-50%);max-width:400px;",
        close_style: "color: #000;",
        //弹窗内容
        content: `
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <div style="font-size:20px;padding-top:20px">图片引入方式</div>
            <hr>
            <div class="btn_card" style="display: flex;flex-direction: column;width: 300px;">
                <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="display:flex; flex-direction: column;margin-left:0px;">
                    <input type="radio" lay-filter="img_tag" name="img_tag" value="普通引入" title="普通引入" checked>
                    <input type="radio" lay-filter="img_tag" name="img_tag" value="带默认背景图" title="带默认背景图" >
                    <input type="radio" lay-filter="img_tag" name="img_tag" value="懒加载" title="懒加载" >
                    <input type="radio" lay-filter="img_tag" name="img_tag" value="带缩略图异步加载" title="带缩略图异步加载" >
                    </div>
                </div>
                </form>
                <div style="    display: flex;flex-direction: row;justify-content: center;align-items: center;">
                    <button id="img_tag_button">上传图片</button>
                    <button id="img_tag_button_no_src">确定引入</button>
                </div>

            </div>
            </div>
        `,
    };
    var popup_select_img_tag = new popup_sidebar();
    popup_select_img_tag.init(data);
    layui.use('form', function () {
        var form = layui.form;
        window['img_tag'] = {
            value: '普通引入'
        };
        form.on("radio(img_tag)", function (obj) {
            window['img_tag'] = obj;
        })
    });
    $('#img_tag_button').click(
        function () {
            switch (window['img_tag'].value) {
                case '普通引入':
                    var content = get_selected_content();
                    insert_to_editor_image(`${content}`)
                    break;
                case '带缩略图异步加载':
                    if (getComponentCode('<!-- 带缩略图异步加载 引入开始 -->', '<!-- 带缩略图异步加载 引入结束 -->').length <= 0) {
                        insert_to_editor(`<!-- 带缩略图异步加载 引入开始 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"><\/script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"><\/script>
<script type="text/javascript" charset="utf-8">
    $(function() {
    $("img.lazy_placeholder").lazyload({
        placeholder : "https://www.dcdev.net/icon.png", //用图片提前占位
        effect: "fadeIn"
    });
});
<\/script>
<!-- 带缩略图异步加载 引入结束 -->
`)
                    }
                    insert_to_editor(`<img src="这里填缩略图地址" class="lazy_placeholder" data-original='${res}'>\n`)
                    break;
                case '懒加载':
                    if (getComponentCode('<!-- 懒加载 引入开始 -->', '<!-- 懒加载 引入结束 -->').length <= 0) {
                        insert_to_editor(`<!-- 懒加载 引入开始 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"><\/script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"><\/script>
<script type="text/javascript" charset="utf-8">
    $(function() {
    $("img.lazy").lazyload({effect: "fadeIn"});

    
});
<\/script>
<!-- 懒加载 引入结束 -->
`)
                    }
                    get_editor_image_url(function (res) {
                        insert_to_editor(`<img class="lazy" data-original='${res}'>\n`)
                    })
                    break;
                case '带默认背景图':
                    if (getComponentCode('<!-- 带默认背景图 引入开始 -->', '<!-- 带默认背景图 引入结束 -->').length <= 0) {
                        insert_to_editor(`<!-- 带默认背景图 引入开始 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"><\/script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"><\/script>
<script type="text/javascript" charset="utf-8">
    $(function() {
    $("img.lazy_placeholder").lazyload({
        placeholder : "https://www.dcdev.net/icon.png", //用图片提前占位
        effect: "fadeIn"
    });
});
<\/script>
<!-- 带默认背景图 引入结束 -->
`)
                    }
                    get_editor_image_url(function (res) {
                        insert_to_editor(`<img class="lazy_placeholder" data-original='${res}'>\n`)
                    })
                    break;
                default:
                    break;
            }
            popup_select_img_tag.close_popup();
        }
    );
    $('#img_tag_button_no_src').click(
        function () {
            switch (window['img_tag'].value) {
                case '普通引入':
                    var content = get_selected_content();
                    insert_to_editor(`<img src='https://www.dcdev.net/icon.png' style='width:20px;height:20px;'>\n`)
                    break;
                case '带缩略图异步加载':
                    if (getComponentCode('<!-- 带缩略图异步加载 引入开始 -->', '<!-- 带缩略图异步加载 引入结束 -->').length <= 0) {
                        insert_to_editor(`<!-- 带缩略图异步加载 引入开始 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"><\/script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"><\/script>
<script type="text/javascript" charset="utf-8">
    $(function() {
    $("img.lazy_placeholder").lazyload({
        placeholder : "https://www.dcdev.net/icon.png", //用图片提前占位
        effect: "fadeIn"
    });
});
<\/script>
<!-- 带缩略图异步加载 引入结束 -->
`)
                    }
                    insert_to_editor(`<img src="这里填缩略图地址" class="lazy_placeholder" data-original="">\n`)
                    break;
                case '懒加载':
                    if (getComponentCode('<!-- 懒加载 引入开始 -->', '<!-- 懒加载 引入结束 -->').length <= 0) {
                        insert_to_editor(`<!-- 懒加载 引入开始 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"><\/script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"><\/script>
<script type="text/javascript" charset="utf-8">
    $(function() {
    $("img.lazy").lazyload({effect: "fadeIn"});

    
});
<\/script>
<!-- 懒加载 引入结束 -->
`)
                    }
                    insert_to_editor(`<img class="lazy" data-original=''>\n`)
                    break;
                case '带默认背景图':
                    if (getComponentCode('<!-- 带默认背景图 引入开始 -->', '<!-- 带默认背景图 引入结束 -->').length <= 0) {
                        insert_to_editor(`<!-- 带默认背景图 引入开始 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"><\/script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"><\/script>
<script type="text/javascript" charset="utf-8">
    $(function() {
    $("img.lazy_placeholder").lazyload({
        placeholder : "https://www.dcdev.net/icon.png", //用图片提前占位
        effect: "fadeIn"
    });
});
<\/script>
<!-- 带默认背景图 引入结束 -->
`)
                    }
                    insert_to_editor(`<img class="lazy_placeholder" data-original=''>\n`)
                    break;
                default:
                    break;
            }
            popup_select_img_tag.close_popup();
        }
    );

    function get_editor_image_url(callback) {
        $.getScript("https://res.dcdev.net/dcdev/v1.0.8/assets/js/crop_image.js",
            function () {
                setTimeout(() => {
                    var data = {
                        // 是否自动选择图片
                        autoSelectImg: false,
                        //canvas（图片）相关
                        movable: true, //类型,//Boolean，默认值true。是否允许移动图片
                        rotatable: true, //类型,//Boolean，默认值true。是否允许旋转图片。
                        // scalable: true,//  默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
                        zoomable: true, // 默认true, 是否允许缩放图片。
                        zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
                        zoomOnTouch: true, // 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
                        //crop(裁剪框)相关
                        //aspectRatio: 1 / 1, //裁剪框比例  默认NaN   例如:: 1 / 1,//裁剪框比例 1:1
                        modal: true, //类型:Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
                        cropBoxMovable: true, //默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
                        autoCrop: true, //类型:Boolean，默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。highlight:类型:Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
                        guides: true, //类型:Boolean，默认值true。是否在剪裁框上显示虚线。
                        center: true, // 默认true  是否显示裁剪框 中间的+ 
                        cropBoxResizable: true, //是否允许改变裁剪框的大小
                        imageInfo: function (res) { //返回所选图片的信息回调
                        }
                    };
                    crop_image.crop(data, function (res) {
                        var pid = localStorage["own_pid"];
                        if (!pid)
                            pid = "0000000000000000";
                        var url = "https://www.dcdev.net/" +
                            "lib/lib_of_back_end/v1.0.1/api/dcdev/upload/upload_image_base64.php";
                        var data = {
                            'pid': pid,
                            "storage_type": "localhost",
                            "upload_img": res,
                        };
                        $.ajax({
                            method: "post",
                            dataType: "json",
                            url: url,
                            data: {
                                params: JSON.stringify(data)
                            },
                            success: function (res) {
                                if (res["res"] == 0) {
                                    ui_class.show_error(res['tips'] ? res['tips'] : res[
                                        'desc']);
                                } else {
                                    if (res.res == 1) {
                                        callback(res.data.url);
                                        $("#_dc_crop_image_container_").remove()
                                        $("#_dc_crop_image_mask_").remove()
                                    }

                                }
                            }
                        })
                    })
                }, 500);
            })

    }
    // 选择组件
    // var data = {
    //     //弹窗组件生成区域 div id
    //     id: "popup_select_component",
    //     //弹窗方向，左边，右边，下边，上边
    //     direction: 'left',
    //     height: '100vh',
    //     width: 'auto',
    //     style: "background-color: #FFF;color:#000;box-shadow:4px 4px 5px #999;",
    //     close_style: "color: #000;",
    //     //弹窗内容 
    //     content: `
    //     <div style="display: flex;flex-direction: column;width: 100%;margin-top: 40px;padding: 0 10px;height: calc(100% - 40px);overflow: scroll;">
    //         <div style="margin-left:10px;width: 300px;display: flex;flex-direction: column;padding-right: 10px;align-items: center;justify-content: center;">
    //             <div id="component_list" ></div>
    //             <hr>
    //             <div  id="component_list_2" ></div>
    //         </div>
    //         <div >
    //             <div id="component_type_list2" class="xx-waterflow" style="margin-bottom:10px;"></div>
    //             <div id="component_type_list" class="xx-waterflow" ></div>
    //         </div>
    //         <div id="component_container" ></div>
    //     </div>
    //     `,
    // };
    // var popup_select_component = new popup_sidebar();
    // popup_select_component.init(data);

    // 选择样式
    var data = {
        //弹窗组件生成区域 div id
        id: "popup_setting_style",
        //弹窗方向，左边，右边，下边，上边
        direction: 'left',
        height: '100vh',
        width: '670px',
        style: "background-color: #FFF;color:#000;box-shadow:4px 4px 5px #999;",
        close_style: "color: #000;",
        //弹窗内容
        content: `
        <div id="_popup_setting_style_" style="display: flex;flex-direction: row;width: 100%;margin-top: 40px;padding: 0 10px;height: calc(100% - 40px);">
        </div>
        `,
    };
    var popup_setting_style = new popup_sidebar();
    popup_setting_style.init(data);

    // 插入api
    var data = {
        //弹窗组件生成区域 div id
        id: "popup_setting_ajax",
        //弹窗方向，左边，右边，下边，上边
        style: "background-color: #FFF;color:#000;box-shadow:4px -4px 5px #999;",
        close_style: "color: #000;",
        direction: 'bottom',
        height: '60vh',
        width: '100%',
        //弹窗内容
        content: `
<div style="display: flex;flex-direction: row;width: 100%;margin-top: 52px;height: calc(60vh - 52px);padding: 0 10px;">
    <div style="flex:1;display: flex;flex-direction: column;padding-right: 10px;align-items:flex-end;">
        <textarea class="url-area"
            style="width: 100%;min-height: 0;margin-bottom: 10px;border-radius: 5px;padding: 10px;padding-left: 0;font-size: 14px;resize:none;flex: 1"
            placeholder='输入请求的url地址'></textarea>
        <textarea class="data-area"
            style="width: 100%;min-height: 0;font-size: 14px;padding: 10px;resize:none;border-radius: 5px;margin-bottom: 10px;flex: 3"
            placeholder="输入json数据形式{key:value}"></textarea>
        <button class="sendbtn" data-btnani='sendbtn-ani' style="flex: 1;margin-bottom: 10px">测试</button>
    </div>
    <div style="flex:1;display: flex;flex-direction: column;align-items:flex-end;">
        <div id="insert_api" style="width: 100%;height: calc(35vh + 10px);margin-bottom: 10px;flex: 4.8"></div>
        <button class="addbtn" data-btnani='sendbtn-ani' style="flex: 1;margin-bottom: 10px">插入</button>
    </div>
</div>
`,
    };
    var popup_setting_ajax = new popup_sidebar();
    popup_setting_ajax.init(data);
    //加载editor
    $('#insert_api').load("insert_api.html");

    //请求成功后的数据
    var dateres = '';
    window.onload = function () {
        $('.monaco-editor,.overflow-guard').css({
            'width': '100%',
            'height': '100%'
        });
    };
    //url正则表达式
    var strUrl = "^((https|http|ftp|rtsp|mms)?://)" +
        "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" +
        "(([0-9]{1,3}\.){3}[0-9]{1,3}" +
        "|" +
        "([0-9a-z_!~*'()-]+\.)*" +
        "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." +
        "[a-z]{2,6})" +
        "(:[0-9]{1,4})?" +
        "((/?)|" +
        "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
    var urlDemo = new RegExp(strUrl);

    //send按钮事件
    $('.sendbtn').on('click', function (event) {
        btn = $(this),
            btnani = btn.data('btnani'),
            urlinput = $(".url-area"),
            datainput = $(".data-area"),
            outerdata = $('.outer-area');
        outerdata.html('');
        btn.removeClass(btnani);
        setTimeout(function () {
            btn.addClass(btnani);
        });
        //如果输入的url格式正确
        if (urlDemo.test(urlinput.val())) {
            $.ajax({
                url: urlinput.val(),
                type: 'POST',
                data: {
                    params: JSON.stringify(datainput.val())
                },
                dataType: 'json',
                success: function (re) {
                    dateres = JSON.stringify(re);
                    insert_to_editor_show(`<script>${$('#modelscript').html()}<\/script>`);
                },
                error: function (re) {
                    dateres = '';
                }
            })
        }
    });
    //add按钮事件
    $('.addbtn').on('click', function (event) {
        btn = $(this),
            btnani = btn.data('btnani'),
            urlinput = $(".url-area"),
            datainput = $(".data-area"),
            outerdata = $('.outer-area');
        outerdata.html('');
        btn.removeClass(btnani);
        setTimeout(function () {
            btn.addClass(btnani);
        });
        insert_to_editor(dateres);
    });

    var data = {
        //弹窗组件生成区域 div id
        id: "popup_select_location",
        //弹窗方向，左边，右边，下边，上边
        direction: 'left',
        height: '100vh',
        width: '20vw',
        style: "background-color: #FFF;color:#000;box-shadow:4px 4px 5px #999;",
        close_style: "color: #000;",
        //弹窗内容
        content: `
<div id="position" style="width: 100%;height: 100%;margin-bottom: 10px;"></div>
`,
    };
    var popup_select_location = new popup_sidebar();
    popup_select_location.init(data);
    //加载定位内容
    $('#position').load("insert_position.html");
    // var data2 = {
    //     //弹窗组件生成区域 div id
    //     id: "popup_setting_component",
    //     //弹窗方向，左边，右边，下边，上边
    //     style: "background-color: #FFF;color:#000;box-shadow:4px 4px 5px #999;",
    //     close_style: "color: #000;",
    //     direction: 'left',
    //     height: '100vh',
    //     width: '20vw',
    //     //弹窗内容
    //     content: `
    //         <div ondrop="drop_handler(event);" ondragover="dragover_handler(event);"  id="setting_component" style="width: 100%;height: 100%;margin-bottom: 10px;"></div>
    //     `,
    // };
    // var popup_setting_component = new popup_sidebar();
    // popup_setting_component.init(data2);
    // //加载定位内容
    // $('#setting_component').load("setting_component.html");
    var uls = null;
    var offsetTop = 0;
    var clientX = '';
    var clientY = '';
    var n = 0;

    function drop_handler(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var nodes = document.getElementById(data);
        uls.insertBefore(nodes, children(uls)[n]);
        nodes.removeAttribute('id');
        ev.dataTransfer.clearData();
    }

    function dragstart_handler(ev) {
        uls = document.querySelector('.drop');
        offsetTop = uls.offsetTop;
        clientX = '';
        clientY = '';
        n = 0;
        ev.target.setAttribute('id', 'test1')
        ev.dataTransfer.setData("text/plain", ev.target.id);
    }

    function dragover_handler(ev) {
        ev.preventDefault();
        clientX = ev.clientX;
        clientY = ev.clientY;
        n = Math.round((clientY - offsetTop) / 36) //36代指拖拽元素的高度    
    }

    function children(node) {
        var tmp = node.childNodes;
        var arr = [];
        tmp.forEach(function (item) {
            if (item.nodeType == 1) {
                arr.push(item);
            }
        });
        return arr;
    }
    var data = {
        //弹窗组件生成区域 div id
        id: "popup_insert_script",
        //弹窗方向，左边，右边，下边，上边
        direction: 'right',
        height: '100vh',
        width: '20vw',
        style: "background-color: #FFF;color:#000;box-shadow:-4px 4px 5px #999;",
        close_style: "color: #000;",
        //弹窗内容
        content: `
<div id="script" style="width: 100%;height: 100%;margin-bottom: 10px;"></div>
`,
    };
    var popup_insert_script = new popup_sidebar();
    popup_insert_script.init(data);
    //加载定位内容
    $('#script').load("insert_script.html");
</script>